<template>
<div class="floor-content">
    <div class="switch-wrap" @click="handleChangeHomenHotMap(!HumenHotMap)">
        <div class="switch-text">人口热力图</div>
        <div class="switch-box" :class="`${HumenHotMap ? 'open':''}`"></div>
    </div>
    <!-- 楼层 -->
    <div class="floor-list" v-show="currentFloorState">
        <div class="floor-item" v-for="i in 4" :key="i" :class="`${currentFloor === i ? 'active':''}`" @click="handleChangeFloor(i)">{{i}}F</div>
    </div>
    <div class="floor-content-btns-list">
        <!-- 展开 -->
        <div
            class="show-floor-btn floor-btn"
            :class="`${currentFloorState ? 'active': ''}`"
            @click.stop="handleChangeFloorState(true)"
        ></div>
        <!-- 折叠 -->
        <div
            class="expand-floor-btn floor-btn"
            :class="`${currentFloorState ? '': 'active'}`"
            @click.stop="handleChangeFloorState(false)"
        ></div>
    </div>
</div>
</template>
<script setup>
import { useState } from './useState'

const {
    currentFloorState,
    currentFloor,
    HumenHotMap,
    handleChangeFloor,
    handleChangeFloorState,
    handleChangeHomenHotMap
} = useState()

</script> 
<style lang="scss" scoped>
.floor-content {
    position: absolute;
    bottom: 60px;
    left: -130px;
    cursor: pointer;
    user-select: none;

    .switch-wrap {
        position: absolute;
        left: -20px;
        bottom: 0%;
        transform: translate(-100%, 0%);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 42px;
        cursor: pointer;
        
        .switch-text {
            // color: #000;
            font-size: 14px;
            flex-shrink: 0;
            white-space: nowrap;
            padding-right: 4px;
        }

        .switch-box {
            flex-shrink: 0;
            width: 56px;
            height: 24px;
            background: url(@/assets/images/s_close.png) no-repeat center/cover;
            &.open {
                background-image: url(@/assets/images/s_open.png);
            }
        }
    }

    .floor-list {
        margin-bottom: 5px;
        .floor-item {
            width: 78px;
            height: 24px;
            background: url(@/assets/images/floor_num_bg.png) no-repeat center/cover;
            color: #ffffff;
            text-align: center;
            padding: 2px 0;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            &.active {
            background-image: url(@/assets/images/floor_num_bg_active.png);
            }
        }
        .floor-item + .floor-item {
            margin-top: 11px;
        }
        
    }
    .floor-content-btns-list {
      display: flex;
      user-select: none;
      align-items: center;
      .floor-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background-repeat: no-repeat;
        background-size: contain;
        margin: 5px;
        cursor: pointer;
        transition: all 0.1s linear;
        &:active {
          transform: scale(1.05);
        }
      }
      .show-floor-btn {
        background-image: url("@/assets/images/open_default.png");
        &.active {
          background-image: url("@/assets/images/open_active.png");
        }
      }
      .expand-floor-btn {
        background-image: url("@/assets/images/close_default.png");
        &.active {
          background-image: url("@/assets/images/close_active.png");
        }
      }
    }
  }
</style>